<template>
  <div class="animate">
    <div class="lightbox box">
      <div class="centercircle center">
        <img src="../../assets/img/bigcircle1.png" alt="加载失败" />
        <span class="three">数据指挥中心</span>
        <div class="draw drawA">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/circle1.png" alt="加载失败" />
            <span>保障农民工工资支付系统</span>
          </div>
        </div>
        <div class="draw drawB">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/circle1.png" alt="加载失败" />
            <span>税务局</span>
          </div>
        </div>
        <div class="draw drawC">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/circle1.png" alt="加载失败" />
            <span>电力局</span>
          </div>
        </div>
        <div class="draw drawD">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/circle1.png" alt="加载失败" />
            <span>夷陵一家亲</span>
          </div>
        </div>
        <div class="draw drawE">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/circle1.png" alt="加载失败" />
            <span>水务局</span>
          </div>
        </div>
        <div class="draw drawF">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/circle1.png" alt="加载失败" />
            <span>一体化平台</span>
          </div>
        </div>
        <div class="draw drawG">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/circle1.png" alt="加载失败" />
            <span>人社局</span>
          </div>
        </div>
        <div class="draw drawH">
          <div class="drawLine">
            <div class="circle"></div>
            <div class="line"></div>
            <div class="circle"></div>
            <div class="move"></div>
          </div>
          <div class="picA">
            <img src="../../assets/img/bigcircle2.png" alt="加载失败" />
            <span class="three">大数据局</span>
            <div class="darkdraw darkdrawA">
              <div class="drawLine">
                <div class="circle"></div>
                <div class="line"></div>
                <div class="circle"></div>
                <div class="move"></div>
              </div>
              <div class="picB">
                <img src="../../assets/img/circle2.png" alt="加载失败" />
                <span>企业基础数据</span>
              </div>
            </div>
            <div class="darkdraw darkdrawB">
              <div class="drawLine">
                <div class="circle"></div>
                <div class="line"></div>
                <div class="circle"></div>
                <div class="move"></div>
              </div>
              <div class="picB">
                <img src="../../assets/img/circle2.png" alt="加载失败" />
                <span>行政处罚</span>
              </div>
            </div>
            <div class="darkdraw darkdrawC">
              <div class="drawLine">
                <div class="circle"></div>
                <div class="line"></div>
                <div class="circle"></div>
                <div class="move"></div>
              </div>
              <div class="picB">
                <img src="../../assets/img/circle2.png" alt="加载失败" />
                <span>联合惩戒</span>
              </div>
            </div>
            <div class="darkdraw darkdrawD">
              <div class="drawLine">
                <div class="circle"></div>
                <div class="line"></div>
                <div class="circle"></div>
                <div class="move"></div>
              </div>
              <div class="picB">
                <img src="../../assets/img/circle2.png" alt="加载失败" />
                <span>诚信评价</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'animateBg',
  data() {
    return {}
  },
}
</script>

<style lang="less" scoped>
.animate {
  width: 100%;
  height: 100%;
  position: relative;
  .lightbox {
    width: 75%;
    height: 75%;
    position: absolute;
    left: 0;
    bottom: 5%;
  }
  .darkbox {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 3%;
    top: 3%;
  }
  .box {
    animation: floatAnim 1.5s ease-in-out 0.5s infinite alternate;
    &:hover {
      animation: none;
    }
    .centercircle {
      width: 223px;
      height: 222px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .darkcentercircle {
      width: 153px;
      height: 153px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    .center {
      img {
        width: 100%;
        height: 100%;
        animation: circle 2s linear infinite alternate;
      }
      span {
        display: inline-block;
        width: 50%;
        font-size: 26px;
        color: #fff;
        font-weight: normal;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .draw {
        transform-origin: left;
        position: absolute;
        top: 50%;
        left: 50%;
        .drawLine {
          padding-left: 60px;
          display: flex;
          position: relative;
          z-index: 10;
          .line {
            flex: 1;
            height: 2px;
            background-color: #00f6ff;
            position: relative;
            top: 3px;
            opacity: 0.7;
          }
          .circle {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #00f6ff;
          }
          .move {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #00f6ff;
            position: absolute;
            left: 60px;
            top: -1px;
            animation: moveLine 2s linear infinite alternate;
          }
        }
        .picA {
          position: absolute;
          top: 0;
          img {
            animation-name: bigcircle;
          }
          span {
            width: 40%;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
            line-height: 13px;
          }
        }
      }
      .drawA {
        transform: rotate(5deg);
        .drawLine {
          width: 130px;
          .move {
            animation-duration: 1.9s;
          }
        }
        .picA {
          width: 126px;
          height: 126px;
          left: 100px;
          transform: translateY(-50%) rotate(-5deg);
        }
      }
      .drawB {
        transform: rotate(40deg);
        .drawLine {
          width: 230px;
          .move {
            animation-duration: 4s;
          }
        }
        .picA {
          width: 96px;
          height: 96px;
          left: 206px;
          transform: translateY(-50%) rotate(-40deg);
        }
      }
      .drawC {
        transform: rotate(75deg);
        .drawLine {
          width: 140px;
          .move {
            animation-duration: 2.2s;
          }
        }
        .picA {
          width: 96px;
          height: 96px;
          left: 114px;
          transform: translateY(-50%) rotate(-75deg);
        }
      }
      .drawD {
        transform: rotate(105deg);
        .drawLine {
          width: 140px;
          .move {
            animation-duration: 2.5s;
          }
        }
        .picA {
          width: 106px;
          height: 106px;
          left: 110px;
          transform: translateY(-50%) rotate(-105deg);
        }
      }
      .drawE {
        transform: rotate(140deg);
        .drawLine {
          width: 230px;
          .move {
            animation-duration: 3.5s;
          }
        }
        .picA {
          width: 96px;
          height: 96px;
          left: 204px;
          transform: translateY(-50%) rotate(-140deg);
        }
      }
      .drawF {
        transform: rotate(170deg);
        .drawLine {
          width: 160px;
          .move {
            animation-duration: 2.8s;
          }
        }
        .picA {
          width: 106px;
          height: 106px;
          left: 130px;
          transform: translateY(-50%) rotate(-170deg);
        }
      }
      .drawG {
        transform: rotate(235deg);
        .drawLine {
          width: 180px;
          .move {
            animation-duration: 3s;
          }
        }
        .picA {
          width: 96px;
          height: 96px;
          left: 152px;
          transform: translateY(-50%) rotate(-235deg);
        }
      }
      .drawH {
        transform: rotate(-30deg);
        .drawLine {
          width: 200px;
          .move {
            animation-duration: 3.2s;
          }
        }
        .picA {
          width: 153px;
          height: 153px;
          left: 165px;
          transform: translateY(-50%) rotate(30deg);
          span {
            width: 50%;
            font-size: 18px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #ffffff;
            line-height: 24px;
          }
        }
        .darkdraw {
          transform-origin: left;
          position: absolute;
          top: 50%;
          left: 50%;
          .drawLine {
            padding-left: 40px;
            display: flex;
            position: relative;
            z-index: 10;
            .line {
              flex: 1;
              height: 2px;
              background-color: #0066ff;
              position: relative;
              top: 3px;
              opacity: 0.7;
            }
            .circle {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: #0066ff;
            }
            .move {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #0066ff;
              position: absolute;
              left: 40px;
              top: -1px;
              animation: moveLineDark 2s linear infinite alternate;
            }
          }
          .picB {
            position: absolute;
            top: 0;
            img {
              animation-name: bigcircle;
            }
            span {
              width: 50%;
              font-size: 11px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
              line-height: 13px;
            }
          }
        }
        .darkdrawA {
          transform: rotate(210deg);
          .drawLine {
            width: 120px;
            .move {
              animation-duration: 2.2s;
            }
          }
          .picB {
            width: 122px;
            height: 122px;
            left: 90px;
            transform: translateY(-50%) rotate(-210deg);
          }
        }
        .darkdrawB {
          transform: rotate(-75deg);
          .drawLine {
            width: 120px;
            .move {
              animation-duration: 2s;
            }
          }
          .picB {
            width: 102px;
            height: 102px;
            left: 92px;
            transform: translateY(-50%) rotate(75deg);
          }
        }
        .darkdrawC {
          transform: rotate(-20deg);
          .drawLine {
            width: 110px;
            .move {
              animation-duration: 1.8s;
            }
          }
          .picB {
            width: 112px;
            height: 112px;
            left: 80px;
            transform: translateY(-50%) rotate(20deg);
          }
        }
        .darkdrawD {
          transform: rotate(40deg);
          .drawLine {
            width: 140px;
            .move {
              animation-duration: 2.5s;
            }
          }
          .picB {
            width: 102px;
            height: 102px;
            left: 115px;
            transform: translateY(-50%) rotate(-40deg);
          }
        }
      }
    }
  }
}
@keyframes circle {
  from {
    transform: rotate(-10deg) scale(0.9);
  }
  to {
    transform: rotate(10deg) scale(1);
  }
}
@keyframes bigcircle {
  from {
    transform: rotate(-10deg) scale(0.9);
  }
  to {
    transform: rotate(10deg) scale(1.1);
  }
}
@keyframes moveLine {
  0% {
    opacity: 0.2;
    left: 60px;
  }
  50% {
    opacity: 1;
    left: calc(50% + 25px);
  }
  100% {
    opacity: 0.2;
    left: calc(100% - 10px);
  }
}
@keyframes moveLineDark {
  0% {
    opacity: 0.2;
    left: 40px;
  }
  50% {
    opacity: 1;
    left: calc(50% + 15px);
  }
  100% {
    opacity: 0.2;
    left: calc(100% - 10px);
  }
}
@keyframes floatAnim {
  from {
    transform: translate(0, -3px);
  }
  to {
    transform: translate(0, 6px);
  }
}
</style>
